3rd Party Cookie へのアクセスを可能にする Storage Access APIを試してみた

#cookie

西田将幸

2024.06.13

こんにちわ、西田@リテールアプリ共創部マッハチームです

Storage Access API とは？

ユーザーの同意を確認するプロンプトを表示し、3rd Party Cookieへのアクセスの許可を得ることができるAPIです

3rd Party Cookieはクロスサイトトラッキングを防ぐ目的で段階的に廃止されています。その一方でトラッキング以外のユーザーにとって利便性の高い3rd Party Cookieのユースケースが満たせなくなってしまいます

Storage Access APIは、そのユースケースを救うことを目的としたAPIです

※ なお、Storage Access APIは執筆時点では、まだExperimental(実験的)な機能です

オリジン（ユーザがブラウザで明示的にアクセスしたサイト)に埋め込まれたリソースから送信されるCookieです

オリジンからサーバーに送信されるクッキーを 1st Party Cookie と呼び、オリジンに埋め込まれたリソース（iframe、画像等)で、クロスオリジン（ユーザーがブラウザで明示的にアクセスしたサイトと別のオリジン)のサイトに送信されるクッキーを3rd Party Cookieと呼びます

3rd Party Cookieのユースケース

3rd Party Cookieの主なユースケースとしては以下のようなものがあります

ユーザーの行動のトラッキング
認証連携(SSO、埋め込みコンテンツ等)

ユーザーの行動のトラッキング

ユーザーの行動をトラッキングにするのに使われます。広告のリターゲティングなどに使われています。たとえば、キャンプの情報を検索し、それに関連するページを見ていたら、それらのページとは全く関係のない別のサイトでテントの広告ばかりが表示されるといったようなことが起きます

3rd Party Cookieの廃止は、このようなトラッキング用途を防ぐ目的で廃止されます

認証連携

一方3rd Party Cookieは認証の連携にも使われます。たとえば、YouTubeのプレミアム会員になっていると、YouTube以外のサイトに埋め込まれた(3rd Party)動画でも、広告を流さないといったことが実現できます

Storage Access APIは、このような用途を3rd Party Cookie廃止後にも行えることを目的としています

Storage Access APIの使い方

Storage Access APIには２つのメソッドがあります

Document.hasStorageAccess()
Document.requestStorageAccess()

hasStorageAccess

埋め込まれたサイトが、3rd Party Cokieに対するアクセス権があるかどうかを boolean 値で解決するPromiseを返します

document.hasStorageAccess().then((hasAccess) => {
	if (hasAccess) {
	  // すでに許可されている
	else {
	  // まだ許可されていない
	}
});

参考: mdn Document.hasStorageAccess

requestStorageAccess

埋め込まれたサイトから3rd Party Cookieに対するアクセス権をユーザーに対してリクエストします。ユーザーが許可したかどうかは返却されるPromiseでわかります。

許可された場合に履行(fullfilled)され、許可されなかった拒否(rejected)されます

document.requestSotrageAccess().then(
	() => {
	  // アクセスが許可された
	},
	() => {
	  // アクセスが許可されなかった
	},
);

参考: mdn Document.requestStorageAccess

実際に試す

Storage Access API は、まだ実験的な機能でブラウザによって挙動が変わります。

ChromeとSafariで実際にStorage Access APIを試していきます

環境を作成する

オリジンと、オリジンにiframeとして埋め込まれるクロスオリジンのサイトを作成します

オリジン側HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Origin</title>
  </head>
  <body>
    <h1>Origin</h1>
    <iframe 
      src="https://other.example.com/"
      sandbox="allow-scripts allow-same-origin allow-storage-access-by-user-activation"    
    ></iframe>
  </body>
</html>

埋め込まれるiframeに対してサンドボックス設定で以下を許可しています

allow-scripts: iframe内でスクリプトの実行を許可します
allow-same-origin: Cookieへのアクセスの許可を得るために必要です
allow-storage-access-by-user-activation: Storage Access APIを使用するために必要です

埋め込まれる(iframe)側のHTML

埋め込まれる側はサーバーサイドから以下の Set-Cookie ヘッダがサーバーから送信されるようにしておきます

SameSite=None; は、そのクッキーが3rd Party Cookieとしてあることを示すマークです。3rd Party Cookieとしても取り扱いたい場合に必要です

Set-Cookie: name=3rdPartyCookieValue; SameSite=None; Secure

以下のHTMLは、ボタン押下時に Storage Access API プロンプトが表示され、ユーザーが許可をすると、画面内にCookieの内容が表示されます

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>iframe</title>
    <script>
      async function makeRequestWithUserGesture() {
		    const display = document.getElementById("display");      
      
        // 3rd Party Cookieへのアクセス許可を確認する      
        if (!await document.hasStorageAccess()) {
	        try {
	          // 3rd Party Cookieへのアクセス許可をリクエスト
		        await document.requestStorageAccess();
	        } catch (error) {
	          // プロンプトが表示され、許可されなければ reject される
		        display.innerText = "許可されなかった"
   	        return;
	        }
        }
        
        // Cookieの内容を画面表示
        display.innerText = document.cookie;        
	    }
    </script>
  </head>
  <body>
    <h1>iframe</h1>
    <button onclick="makeRequestWithUserGesture()">Request Storage Access</button>
    <div id="display" />
  </body>
</html>

Chromeで試してみた

3rd Party Cookieを無効化

chrome://flags/#test-third-party-cookie-phaseout にアクセスし一時的に3rd Party Cookieが廃止された状態にします

埋め込まれる側のページにアクセスしCookieを保存

Storage Access APIはあくまで、自身の 1st Party Cookie として保存されたCookieを3rd Party CookieとしてもアクセスできるようにするAPIです。

一度埋め込まれる側のページに直接アクセスし、1st Party Cookieとしてサーバーから送信されたCookieをブラウザに保存します

オリジンにアクセスする

オリジンのサイトにアクセスします

埋め込まれたiframe側のSet-Cookieに警告が表示されています

オリジン側のCookieは送信されますが、埋め込まれたiframe側は先ほど保存したCookieが送信されないことを確認できます

Storage Access APIを使用し許可を得る

iframe内のボタンを押して、Storage Access APIを呼び出し、表示されたポップアップで許可します

iframeのJavaScriptでCookieにアクセスできることが確認できます

ただし、サーバーにはCookieは送信されませんでした。サーバーにCookieを送信させるには別途 Chromeを操作し3rd Party Cookieのトラッキングを許可する必要がありました

Safariで試してみる

safariはデフォルトで3rd Party Cookieが無効化されてますので、特別な操作は必要ありません

埋め込まれる側のページにアクセスしCookieを保存

オリジンのページにアクセスする

埋め込まれた側(iframe側)の Set-Cookie ヘッダが送信されてるのに、リクエストにCookieがヘッダが含まれてないことが確認できます

Storage Access APIを使用し許可を得る

Storage Access APIを使用し許可を得ます

※ 執筆時点のSafari(バージョン17.5)では元々の hasStorageAccess APIを使って事前に許可を得てるか確認してからだと上手く動作しなかったので、事前確認なしてで requestStorageAccess を呼び出しています。この実装でも、ユーザーの許可はキャッシュされるので、２回目以降は一定時間プロンプトが開くことなく3rd Party Cookieにアクセスできます

<script>
  async function makeRequestWithUserGesture() {
  const display = document.getElementById("display");
    // 3rd Party Cookieへのアクセス許可を確認する      
    try {
      // 3rd Party Cookieへのアクセス許可をリクエスト
      await document.requestStorageAccess();
    } catch (error) {
      console.error(error);
      // プロンプトが表示され、許可されなければ reject される
      display.innerText = "許可されなかった"
      return;
    }
    
    // Cookieの内容を画面表示
    display.innerText = document.cookie;        
  }
</script>

プロンプトが起動するので許可を選択します